<template>
  <div class="Ureg">
      <el-alert
        :closable='false'
        v-if="errorInfo"
        :title="errorInfo"
        style="margin-bottom: 10px"
        type="warning"
        center
        show-icon>
    </el-alert>
      <el-form :model="userReg" ref="userRegForm" label-position="center">
        <el-row>
            <el-col>
                <el-form-item>
                    <el-input placeholder="昵称(必填)" v-model="userReg.nickname"></el-input>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item>
                    <el-input type="password" autocomplete="off" placeholder="密码(6-18位数字或字母,必填)" v-model="userReg.passWord"></el-input>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item>
                    <el-input type="password" autocomplete="off" placeholder="确认密码(必填)" v-model="userReg.againPassWord"></el-input>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item>
                    <el-input placeholder="邮箱(用于找回密码,必填)" v-model="userReg.email"></el-input>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item>
                    <el-input placeholder="手机号(选填)" v-model="userReg.phone"></el-input>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item class="verificaCodeInput">
                    <el-input placeholder="验证码(必填)" v-model="userReg.verificaCode"></el-input>
                    <div @click="reloadVerificaCode()" class="verificaCode" v-html="verificationCode"></div>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item prop='agree'>
                    <el-checkbox v-model="userReg.agree">同意用户登陆/注册协议</el-checkbox>
                </el-form-item>
            </el-col>
            <el-col style="text-align: right">
                <el-button @click="handUserReg()">注册</el-button>
            </el-col>
        </el-row>
    </el-form>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions} from 'vuex';
import { mobileReg, emailReg} from '../utils/index';
export default {
    computed: {
        ...mapGetters(['verificationCode'])
    },
    data() {
        return {
            errorInfo: '',
            userReg: {
                nickname: '',
                passWord: '',
                againPassWord: '',
                email: '',
                phone: '',
                verificaCode: '',
                agree: true
            },
            regCloum: {
                nickname: {
                    required: true,
                    name: '昵称'
                },
                passWord: {
                    required: true,
                    name: '密码'
                },
                againPassWord: {
                    required: true,
                    name: '确认密码'
                },
                email: {
                    required: true,
                    name: '邮箱'
                },
                phone: {
                    required: false,
                    name: '手机号'
                },
                verificaCode: {
                    required: true,
                    name: '验证码'
                }
            }
        }
    },
    watch: {
        errorInfo() {
            if (this.errorInfo) {
                setTimeout(() => {
                    this.errorInfo = ''
                }, 2000);
            }
        }
    },
    methods: {
        ...mapMutations({
            setSignVisible: 'SET_SIGNVISIBLE'
        }),
        ...mapActions({
            getVerificationCode: "getVerificationCode",
            userRegFun: 'userReg'
        }),
        reloadVerificaCode() {
            this.getVerificationCode({
                type: 'reg'
            });
        },
        async handUserReg() {
            for (let item in this.regCloum) {
                if (this.regCloum[item].required && this.userReg[item] === '') {
                    this.errorInfo = `${this.regCloum[item].name}不能为空！`
                    return
                }
            }
            if (this.regCloum.passWord.required &&
                (this.userReg.passWord.length < 6 || this.userReg.passWord.length > 18)) {
                    this.errorInfo = `密码需要6-18位数字或字母`
                    return
            }
            if (this.regCloum.passWord.required &&
                this.regCloum.againPassWord.required &&
                (this.userReg.passWord !== this.userReg.againPassWord)) {
                    this.errorInfo = `两次输入密码不一致`
                    return;
            }
            if (!emailReg.test(this.userReg.email) && this.regCloum.email.required) {
                this.errorInfo = `邮箱格式错误,请重新输入!`
                return;
            }
            if (!mobileReg.test(this.userReg.phone) && this.userReg.phone && this.regCloum.phone.required) {
                this.errorInfo = `手机号码错误,请重新输入!`
                return;
            }
            if (!this.userReg.agree) {
                this.errorInfo = `请您勾选同意协议`
                return;
            }
            let data = await this.userRegFun(this.userReg);
            if (data.code !== 0) {
                this.errorInfo = data.msg
                return;
            }
            this.setSignVisible(false)
            this.$notify({
                message: '注册成功!',
                type: 'success',
                offset: 50,
                duration: 3000
            });
            setTimeout(() => {
                window.location.href="/";
            }, 800);
        }
    },
    mounted() {
        this.getVerificationCode({
            type: 'reg'
        });
    }
}
</script>